<template>
  <div class="home">
    <div class="blueHour">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm darkAmber"
      >
        <el-form-item label="昵称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button type="warning" @click="resetForm('ruleForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-footer>
      <div class="header-container">
        <div class="header-left" @click="gitee">
          <svg
            t="1649494744692"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2518"
            width="20"
            height="20"
          >
            <path
              d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m259.168-568.896h-290.752a25.28 25.28 0 0 0-25.28 25.28l-0.032 63.232c0 13.952 11.296 25.28 25.28 25.28h177.024a25.28 25.28 0 0 1 25.28 25.28v12.64a75.84 75.84 0 0 1-75.84 75.84h-240.224a25.28 25.28 0 0 1-25.28-25.28v-240.192a75.84 75.84 0 0 1 75.84-75.84h353.92a25.28 25.28 0 0 0 25.28-25.28l0.064-63.2a25.312 25.312 0 0 0-25.28-25.312H417.184a189.632 189.632 0 0 0-189.632 189.6v353.952c0 13.952 11.328 25.28 25.28 25.28h372.928a170.656 170.656 0 0 0 170.656-170.656v-145.376a25.28 25.28 0 0 0-25.28-25.28z"
              p-id="2519"
            ></path>
          </svg>
          支持项目
        </div>
        <div class="header-middle" @click="contact">
          <svg
            t="1649494380020"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1136"
            width="20"
            height="20"
          >
            <path
              d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
              p-id="1137"
            ></path>
          </svg>
          联系作者
        </div>
        <div class="header-right" @click="disclaimer">
          <i class="el-icon-warning-outline"></i>免责声明
        </div>
      </div>
      <div class="header-text">
        <p>该学习资源共享网站由黄炜俊、李映玲、刘思杰团队提供</p>
      </div>
    </el-footer>
  </div>
</template>


<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
//点击特效
class Circle {
  constructor({ origin, speed, color, angle, context }) {
    this.origin = origin;
    this.position = { ...this.origin };
    this.color = color;
    this.speed = speed;
    this.angle = angle;
    this.context = context;
    this.renderCount = 0;
  }

  draw() {
    this.context.fillStyle = this.color;
    this.context.beginPath();
    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
    this.context.fill();
  }

  move() {
    this.position.x = Math.sin(this.angle) * this.speed + this.position.x;
    this.position.y =
      Math.cos(this.angle) * this.speed +
      this.position.y +
      this.renderCount * 0.3;
    this.renderCount++;
  }
}

class Boom {
  constructor({ origin, context, circleCount = 10, area }) {
    this.origin = origin;
    this.context = context;
    this.circleCount = circleCount;
    this.area = area;
    this.stop = false;
    this.circles = [];
  }

  randomArray(range) {
    const length = range.length;
    const randomIndex = Math.floor(length * Math.random());
    return range[randomIndex];
  }

  randomColor() {
    const range = ["8", "9", "A", "B", "C", "D", "E", "F"];
    return (
      "#" +
      this.randomArray(range) +
      this.randomArray(range) +
      this.randomArray(range) +
      this.randomArray(range) +
      this.randomArray(range) +
      this.randomArray(range)
    );
  }

  randomRange(start, end) {
    return (end - start) * Math.random() + start;
  }

  init() {
    for (let i = 0; i < this.circleCount; i++) {
      const circle = new Circle({
        context: this.context,
        origin: this.origin,
        color: this.randomColor(),
        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
        speed: this.randomRange(1, 6),
      });
      this.circles.push(circle);
    }
  }

  move() {
    this.circles.forEach((circle, index) => {
      if (
        circle.position.x > this.area.width ||
        circle.position.y > this.area.height
      ) {
        return this.circles.splice(index, 1);
      }
      circle.move();
    });
    if (this.circles.length == 0) {
      this.stop = true;
    }
  }

  draw() {
    this.circles.forEach((circle) => circle.draw());
  }
}

class CursorSpecialEffects {
  constructor() {
    this.computerCanvas = document.createElement("canvas");
    this.renderCanvas = document.createElement("canvas");

    this.computerContext = this.computerCanvas.getContext("2d");
    this.renderContext = this.renderCanvas.getContext("2d");

    this.globalWidth = window.innerWidth;
    this.globalHeight = window.innerHeight;

    this.booms = [];
    this.running = false;
  }

  handleMouseDown(e) {
    const boom = new Boom({
      origin: { x: e.clientX, y: e.clientY },
      context: this.computerContext,
      area: {
        width: this.globalWidth,
        height: this.globalHeight,
      },
    });
    boom.init();
    this.booms.push(boom);
    this.running || this.run();
  }

  handlePageHide() {
    this.booms = [];
    this.running = false;
  }

  init() {
    const style = this.renderCanvas.style;
    style.position = "fixed";
    style.top = style.left = 0;
    style.zIndex = "999999999999999999999999999999999999999999";
    style.pointerEvents = "none";

    style.width =
      this.renderCanvas.width =
      this.computerCanvas.width =
        this.globalWidth;
    style.height =
      this.renderCanvas.height =
      this.computerCanvas.height =
        this.globalHeight;

    document.body.append(this.renderCanvas);

    window.addEventListener("mousedown", this.handleMouseDown.bind(this));
    window.addEventListener("pagehide", this.handlePageHide.bind(this));
  }

  run() {
    this.running = true;
    if (this.booms.length == 0) {
      return (this.running = false);
    }

    requestAnimationFrame(this.run.bind(this));

    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);

    this.booms.forEach((boom, index) => {
      if (boom.stop) {
        return this.booms.splice(index, 1);
      }
      boom.move();
      boom.draw();
    });
    this.renderContext.drawImage(
      this.computerCanvas,
      0,
      0,
      this.globalWidth,
      this.globalHeight
    );
  }
}

const cursorSpecialEffects = new CursorSpecialEffects();
cursorSpecialEffects.init();

export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  data() {
    //判断两次密码是否一致
    var validatePass = (rule, value, callback) => {
      if (!value.includes(" ")) {
        let passResult;
        passResult = value.replace(/\s+/g, "");
        if (passResult === "" || value.length > 19) {
          callback(new Error("密码为空或密码过长"));
        } else {
          if (this.ruleForm.checkPass !== "") {
            this.$refs.ruleForm.validateField("checkPass");
          }
          callback();
        }
      } else {
        callback(new Error("密码不能带空格"));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //判断名称
    var validateName = (rule, value, callback) => {
      if (!value.includes(" ") && value !== "" && value.length < 19) {
        callback();
      } else {
        callback(new Error("昵称不能带空格为空或过长"));
      }
    };

    //邮箱判断
    var validateEmail = (rule, value, callback) => {
      let regEmail = /^[\dA-Za-z]{4,11}@[\dA-Za-z]{1,4}\.(com|cn)$/;
      let emailResult;
      emailResult = regEmail.test(value);
      if (!emailResult) {
        callback(new Error("邮箱格式错误"));
      } else {
        callback();
      }
    };

    //地址判断
    var validateAddress = (rule, value, callback) => {
      if (!value.includes(" ")) {
        if (value === "" || value.length > 99) {
          callback(new Error("地址为空"));
        } else {
          if (this.ruleForm.addresss !== "") {
            this.$refs.ruleForm.validateField("addresss");
          }
          callback();
        }
      } else {
        callback(new Error("地址不能带空格"));
      }
    };
    return {
      data: [],
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
        email: "",
        address: "",
      },
      rules: {
        //定义名字的规则
        name: [{ required: true, validator: validateName, trigger: "blur" }],
        //定义密码的规则
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        address: [
          {
            required: true,
            validator: validateAddress,
            trigger: "blur",
          },
        ],
        //定义邮箱的规则
        email: [{ required: true, validator: validateEmail, trigger: "blur" }],
      },
      activeIndex2: "1",
    };
  },
  created() {
    this.$http.get("/").then((res) => {
      console.log(res.data);
      let data_info = res.data;
      this.data.push(...data_info);
      console.log(this.data);
      let exist = this.data.some((val) => val == this.ruleForm.name);
      console.log(exist);
    });
  },
  methods: {
    submitForm(formName) {
      let exist = this.data.some((val) => val.username == this.ruleForm.name);
      console.log(exist);

      this.$refs[formName].validate((valid) => {
        if (valid && !exist) {
          this.$http.post("students", this.ruleForm).then(() => {
            this.$message({
              message: "录入成功",
              type: "success",
            });
          });
          console.log(this.ruleForm);

          alert("注册成功，请登录!");
          this.$router.replace("/about");
        } else {
          console.log("error submit!!");
          if (exist) {
            alert("用户已存在!!!");
          }
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //源码地址
    gitee() {
      window.location.href = "https://gitee.com/xiao_jun9999/studyshare";
    },
    //联系作者
    contact() {
      this.$router.push("contact");
    },
    //免责声明
    disclaimer() {
      this.$router.push("disclaimer");
    },
  },
};
</script>
<style>
/* 引入icon的样式 */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* 底部样式*/
.el-footer {
  color: #333;
  text-align: center;
}
.el-footer {
  color: gray;
  background-color: #000;
}

.el-footer .header-container {
  display: flex;
  justify-content: center;
}
.el-footer .header-container div {
  margin-left: 40px;
}
/* 背景样式 */
.blueHour {
  width: 100vw;
  height: 100vh;
  margin-top: -50px;
}
.blueHour {
  display: flex;
  justify-content: center;
  align-items: center;
  background: -webkit-linear-gradient(left, #7e898f 0%, #636c75 100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.55
          )
          100%),
    -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(
            0,
            0,
            0,
            0.08
          )
          63%);
  background: linear-gradient(90deg, #7e898f 0%, #636c75 100%),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    radial-gradient(
      at top,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(0, 0, 0, 0.08) 63%
    );
  background-blend-mode: multiply, screen;
}

.home .darkAmber {
  padding-top: 60px;
  width: 50rem;
  height: 400px;
  background-image: -webkit-linear-gradient(top, #15140f 0%, #34312c 97%);
  background-image: linear-gradient(-180deg, #15140f 0%, #34312c 97%);
}

/* 输入框样式 */
.el-form-item {
  margin-right: 100px;
}
</style>

